<template>
  <div class="session-list">
    <div v-if="groupedSessions && Object.keys(groupedSessions).length > 0">
      <div v-for="(sessionGroup, date) in groupedSessions" :key="date" class="session-group">
        <div class="date-header">{{ date }}</div>
        <div 
          v-for="session in sessionGroup" 
          :key="session.id"
          class="session-item"
          :class="{ active: session.id === currentSessionId }"
          @click="selectSession(session)"
        >
          <div class="session-content">
            <div class="session-title">{{ session.title }}</div>
            <div class="session-time">{{ formatTime(session.created_at) }}</div>
          </div>
          <button 
            class="delete-btn"
            @click.stop="deleteSession(session.id)"
            title="删除会话"
          >
            ×
          </button>
        </div>
      </div>
    </div>
    <div v-else class="empty-state">
      <p>暂无对话记录</p>
      <p>点击"新建对话"开始聊天</p>
    </div>
  </div>
</template>

<script>
import { groupSessionsByDate, formatTime } from '../utils/date.js'

export default {
  name: 'SessionList',
  props: {
    sessions: {
      type: Array,
      default: () => []
    },
    currentSessionId: {
      type: Number,
      default: null
    }
  },
  emits: ['select-session', 'delete-session'],
  computed: {
    groupedSessions() {
      return groupSessionsByDate(this.sessions)
    }
  },
  methods: {
    formatTime,
    selectSession(session) {
      this.$emit('select-session', session)
    },
    deleteSession(sessionId) {
      if (confirm('确定要删除这个会话吗？')) {
        this.$emit('delete-session', sessionId)
      }
    }
  }
}
</script>

<style scoped>
.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.session-group {
  margin-bottom: 20px;
}

.date-header {
  color: #636e72;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 20px;
  margin-bottom: 5px;
}

.session-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.session-item:hover {
  background: #f8f9fa;
}

.session-item.active {
  background: #e8f5f3;
  border-right: 3px solid #00b894;
}

.session-content {
  flex: 1;
  min-width: 0;
}

.session-title {
  font-size: 14px;
  color: #2d3436;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-time {
  font-size: 12px;
  color: #636e72;
}

.delete-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: #636e72;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}

.session-item:hover .delete-btn {
  opacity: 1;
}

.delete-btn:hover {
  background: #ddd;
  color: #d63031;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #636e72;
}

.empty-state p {
  margin: 5px 0;
  font-size: 14px;
}
</style>